<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import axios from 'axios'
import { onMounted, ref } from 'vue'

// 频道对象
type ChannelItem = {
  id: number
  name: string
}
// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[]
  }
  message: string
}

// 从pinia仓库中获取useChannelStore对象
const channelStore = useChannelStore()

// 频道列表
const channelList = ref<ChannelItem[]>([])

// 获取频道列表函数
const getChannelList = async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  // 存储频道列表
  channelList.value = res.data.data.channels
}

// ui渲染完毕后
onMounted(() => {
  getChannelList()
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === channelStore.channelId }"
        href="javascript:;"
        v-for="item in channelList"
        :key="item.id"
        @click="channelStore.changeChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
